<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  <title></title>
  <link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<!--主要界面-->
<!--文本输入框-->
<div id="text" class="text" contenteditable="true" spellcheck="false"></div>
<span id="autoSave" class="lowerLeftQuarter">自动保存：关</span>
<span id="wordCount" class="lowerRightQuarter">字数：0</span>

<!--弹窗-->
<!--搜索框-->
<div id="findDialog" class="findDialog">
  <input type="text" id="findInput" class="input-box" />
  <div class="vertical-line"></div>
  <button id="findNext" class="icon" title="查找下一个">∨</button>
  <button id="findLast" class="icon" title="查找上一个">∧</button>
  <button id="closeFindDialog" class="icon">×</button>
</div>
<!--替换框-->
<div id="replaceDialog" class="replaceDialog">
  <input type="text" id="textOld" class="input-box" />
  <div id="exchangeText" class="icon">↔</div>
  <input type="text" id="textNew" class="input-box" />
  <div class="vertical-line"></div>
  <button id="replaceAll" class="icon icon-font" title="替换全部">All</button>
  <button id="replaceNext" class="icon" title="替换下一个">∨</button>
  <button id="replaceLast" class="icon" title="替换上一个">∧</button>
  <button id="replaceClose" class="icon">×</button>
</div>
<!--提示框-->
<div id="autoCloseDialog" class="dialog">保存成功</div>
<!--保存提示框-->
<div id="saveDialog" class="modal">
  <div class="modal-content">
    <div class="container-transverse">
      <h3>文件未保存，是否保存？</h3>
    </div>
    <div class="container">
      <button id="saveDialog-save" class="modal-btn">保存</button>
      <button id="saveDialog-noSave" class="modal-btn">不保存</button>
      <button id="saveDialog-cancel" class="modal-btn">取消</button>
    </div>
  </div>
</div>
<!--修改自动保存周期提示框-->
<div id="saveCycle" class="modal">
  <div class="modal-content">
    <div class="container">
      <input id="intervalTime" type="number" class="number-input" name="number" min="1" max="60" step="1">
      <span> 分钟</span>
    </div>
    <div id="saveCycleText" class="text-tips"></div>
    <div class="container">
      <button id="saveCycle-save" class="modal-btn">保存</button>
      <button id="saveCycle-cancel" class="modal-btn">取消</button>
    </div>
  </div>
</div>
<!--自定义主题提示框-->
<div id="customThemeDialog" class="modal">
  <div class="modal-content">
    <div class="custom-theme-div">
      <span>文字大小：</span>
      <input id="fontSize" type="number" class="number-input" step="1">
      <span> PX</span>
    </div>
    <div class="custom-theme-div">
      <span>文字颜色：</span>
      <input id="color" type="color" value="#000000">
    </div>
    <div class="custom-theme-div">
      <span>背景颜色：</span>
      <input id="backgroundColor" type="color" value="#FFFFFF">
    </div>
    <div id="customThemeText" class="text-tips"></div>
    <div class="container">
      <button id="customThemeDialog-save" class="modal-btn">保存</button>
      <button id="customThemeDialog-cancel" class="modal-btn">取消</button>
    </div>
  </div>
</div>
<!--快捷键-->
<div id="shortcutKeysDialog" class="modal">
  <div class="modal-content">
    <span id="closeShortcutKeysDialog" class="close">&times;</span>
    <div class="modal-content-about">
      <p>其他快捷键列表</p>
      <div>复制：Ctrl+C</div>
      <div>粘贴：Ctrl+V</div>
      <div>剪切：Ctrl+X</div>
      <div>全选：Ctrl+A</div>
      <div>查找：Ctrl+F</div>
      <div>替换：Ctrl+R</div>
      <div>退出：Ctrl+W</div>
      <div>放大字体：Alt+↑</div>
      <div>缩小字体：Alt+↓</div>
      <div>开启/隐藏菜单：Ctrl+Tab</div>
    </div>
  </div>
</div>
<!--关于-->
<div id="aboutDialog" class="modal">
  <div class="modal-content">
    <span id="closeAboutDialog" class="close">&times;</span>
    <div class="modal-content-about">
      <h3>white-write v1.1</h3>
      <p>一款极简风格的写作软件</p>
      <p>© 2024 yaogedahuoji</p>
    </div>
  </div>
</div>
<!-- 您还可以要求在此进程中运行其他文件 -->
<script src="./renderer.js"></script>
</body>
</html>